<template>
	<view>
		<view>
			<CommonNavbar :navbarList="navbarList" :curNavbar="curNavbar" @handleChooseNavbar="handleChooseNavbar"></CommonNavbar>

			<view class="swiper-wrap" :style="{height: scrollViewHeight}">
				<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
					<swiper-item class="swiper-item">
						<scroll-view scroll-y="true" class="content-wrap" enable-back-to-top>
							<view class="input-wrap" @click.stop="handleChooseAffixConsume(0, item.name)" v-for="(item, index) in list[0]"
							 :key="index">
								<view class="l-wrap">
									<view v-if="!item.choosed" class="icon">
										<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
									</view>
									<view v-else class="icon">
										<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
									</view>
									<view v-if="!item.type">购买保险<text class="terms" @click.stop="handleGoInsuranceDetail(item)">《{{item.name}}》</text></view>
									<view v-else>附加服务<text class="terms" @click.stop="handleGoInsuranceDetail(item,3)">《{{item.name}}》</text></view>
								</view>
								<view class="price">￥{{item.price}}</view>
							</view>
						</scroll-view>
					</swiper-item>

					<swiper-item class="swiper-item">
						<scroll-view scroll-y="true" class="content-wrap" enable-back-to-top>
							<view class="input-wrap" @click.stop="handleChooseAffixConsume(1, item.name)" v-for="(item, index) in list[1]"
							 :key="index">
								<view class="l-wrap">
									<view v-if="!item.choosed" class="icon">
										<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
									</view>
									<view v-else class="icon">
										<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
									</view>
									<view v-if="!item.type">购买保险<text class="terms" @click.stop="handleGoInsuranceDetail(item)">《{{item.name}}》</text></view>
									<view v-else>附加服务<text class="terms" @click.stop="handleGoInsuranceDetail(item,3)">《{{item.name}}》</text></view>
								</view>
								<view class="price">￥{{item.price}}</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNavbar from '../common/common-navbar.vue'
	export default {
		components: {
			CommonNavbar
		},
		props: {
			serviceList: {
				type: Array
			}
		},
		data() {
			return {
				navbarList: [{
						name: '去程服务',
						alias: 'from'
					},
					{
						name: '返程服务',
						alias: 'to'
					}
				],
				curSwiperIndex: 0,
				curNavbar: {
					name: '去程服务',
					alias: 'from'
				},
				list: this.serviceList
			};
		},
		watch: {
			serviceList(v) {
				this.list = v
			}
		},
		computed: {
			scrollViewHeight() {
				if (!this.list.length) return '0rpx'
				return this.list[this.curSwiperIndex].length * 100 + 'rpx'
			}
		},
		methods: {
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curSwiperIndex = i // 通知调用handleSwiper方法
			},
			handleSwiper(e) {
				let i = e.detail.current
				this.curNavbar = this.navbarList[i]
				this.curSwiperIndex = i
				this.$emit('handleChooseNavbar', this.curNavbar, i)
			},
			handleChooseAffixConsume(i, name) {
				this.list[i].forEach(item => {
					if (item.name == name) {
						item.choosed = !item.choosed
					}
				})
					this.$emit('handleChooseService', this.list[i], i)
					this.$forceUpdate()
				// console.log(this.list[0]);
				// console.log(this.list[1]);
			},
			handleGoInsuranceDetail(item, type) { // 跳转到保险详情
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '/pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-wrap {
		.swiper {
			.swiper-item {
				.content-wrap {
					height: 100%;
					box-sizing: border-box;
					background-color: #fff;
					padding: 0 30rpx;

					.input-wrap {
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #ebebeb;
						font-size: 30rpx;

						&:last-child {
							border: none;
						}

						.l-wrap {
							display: flex;
							align-items: center;

							.icon {
								display: inline-block;
								height: 30rpx;
								width: 30rpx;
								margin-right: 20rpx;
							}

							.terms {
								color: $blue;
							}
						}

						.ul_service {
							display: flex;

							.li_service {
								display: flex;
								align-items: center;
								font-size: 30rpx;
								margin-left: 80rpx;

								.txt {
									margin-left: 20rpx;
								}
							}
						}

						.type {
							font-size: 30rpx;
						}

						.input {
							flex: 1;
							text-align: right;
							font-size: 30rpx;
							display: flex;

							input {
								padding-right: 6rpx;
							}
						}
					}

					.content {
						padding: 20rpx 30rpx;
					}
				}
			}
		}
	}
</style>
